import { Component, Prop, Vue } from 'vue-property-decorator'

const pdfFile = require('@/assets/pdf.png')
@Component({})
export default class Upload extends Vue {
  @Prop({ default: '' }) private title!: string
  @Prop({}) private file!: any
  @Prop({}) private action!: string
  @Prop({ type: Boolean, default: false }) private isPdf!: boolean
  @Prop({
    default: () => {
      return { type: 'apply' }
    },
  })
  private headers: any
  @Prop({}) private progress!: () => {}
  @Prop({}) private progressType!: ''
  @Prop({}) private success!: () => {}
  @Prop({}) private error!: () => {}
  @Prop({}) private preview!: () => {}
  @Prop({}) private beforeUpload!: () => {}
  @Prop({ default: '上传印章申请表' }) private content!: string

  protected render(h: any) {
    return (
      <div class="upload-div">
        {this.fileExist() && this.file.status !== 'upload' && (
          <div class="thumbnail" onClick={this.preview}>
            <div class="hover-blank">
              {/* <i class="el-icon-search" /> */}
              {/* 预览 */}
              <img src={require('@/assets/preview.png')} />
            </div>
            <img src={this.isPdf ? pdfFile : this.file.url} />
          </div>
        )}
        <el-upload
          // show-file-list={false}
          class={[{ new: !this.fileExist() }]}
          multiple={false}
          disabled={this.file.status === 'upload'}
          action={this.action}
          headers={this.headers}
          {...{
            props: {
              'on-progress': this.progress,
              'show-file-list': false,
              'on-success': this.success,
              'on-error': this.error,
              'before-upload': this.beforeUpload,
            },
          }}
        >
          {this.file.status === 'upload' ? (
            <div class="progress">
              <p>{this.file.name}</p>
              <el-progress
                type={this.progressType}
                percentage={this.file.precent}
                stroke-width={2}
                color={'rgba(48, 123, 246, 1)'}
              />
            </div>
          ) : this.fileExist() ? (
            this.$slots.success || (
              <p class="re-upload">
                <el-button type="text" slot="trigger">
                  重新上传
                </el-button>
              </p>
            )
          ) : (
            this.$slots.trigger || (
              <p class="upload-trigger">
                {/* <img src={require('@/assets/upload.png')}/> */}
                <i class="el-icon-plus" />
                <br />
                {this.content}
              </p>
            )
          )}
        </el-upload>
      </div>
    )
  }

  private fileExist() {
    return !!this.file && !!this.file.url
  }
}
